<template>
  <div class="header">
    短网址 /网址还原
    <div class="app-container">
      <el-form :model="formData" label-width="0px">
        <el-form-item>网址还原</el-form-item>
        <div class="custom-divider" />
        <el-form-item>
          <el-input
            v-model="formData.shortUrl"
            placeholder="请输入短网址(如:https://dwz.cn/xxxxxxxx)"
            style="width: 80%;"
          />
          <el-button
            type="primary"
            style="width: 15%;"
            @click="还原网址"
          >还原网址</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
// import SwitchRoles from './components/SwitchRoles'

export default {
  name: '',
  data() {
    return {
      formData: {
        shortUrl: ''
      }
    }
  },
  methods: {
    还原网址() {
      // 这里需添加实际的还原短网址逻辑，比如发送请求到后端接口
      console.log('点击了还原网址按钮，短网址为：', this.formData.shortUrl)
    }
  }
}
</script>

<style scoped>
.header{
  font-size: 20px;
  margin: 50px;
}
.app-container {
  size: 20px;
  max-width: 1000px;
  margin: 20px auto;
  padding: 30px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

 .custom-divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 16px 0;
  width: 100%;
}
</style>
